<template>
    <div class="selectTabs_box text-normal">
        <div class="sortItem" @click="onClickSort('sort','综合排序','sort')">
            <div :class="{'color-primary': selectType === 'sort'}">综合排序</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/16@2x.png"  class="sortItem_img" alt="" /><!-- :class="{'invert' : selectType === 'sort'}" -->
        </div>
        <div class="sortItem" @click="onClickSort('grounding','最新上架','createdAt')">
            <div :class="{'color-primary': selectType === 'grounding'}">最新上架</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/17@2x.png" class="sortItem_img" alt="" />
        </div>
        <div class="sortItem" @click="onClickSort('popularity','人气爆款','visitor')">
            <div :class="{'color-primary': selectType === 'popularity'}">人气爆款</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/18@2x.png" class="sortItem_img" alt="" />
        </div>
        <div class="sortItem" @click="onClickSort('score','评分最高','priceDesc')">
            <div :class="{'color-primary': selectType === 'score'}">评分最高</div>
            <img src="https://oss-frakiss.oss-cn-chengdu.aliyuncs.com/icon/mini_images/19@2x.png" class="up_img" alt="" />
        </div>


        <!-- <div class="select" :class="{ 'primary-color bor-bottom': filterType === 'select'}" @click="onClickFilterType('select')">
            <span :class="{'color-primary': isRangeEnable}" class="text">筛选</span>
            <span class="icon" :class="{ 'invert primary-color' : filterType === 'select'}">&#xeb6d;</span>
        </div>
        <div class="options-box text-small" v-if="filterType">

            <div class="white-bg" v-if="filterType === 'sort'">
                <div class="item clearfix" :class="{ 'primary-color': sortValue === item.val }" @click="onClickSort(item)" v-for="(item, index) in sortOptions" :key="index">
                    <div class="fl">
                        {{item.name}}
                    </div>
                    <div class="icon fr" v-if="sortValue === item.val">&#xe633;</div>
                </div>
            </div>
            <div class="white-bg text-normal" v-if="filterType === 'select'">
                <div class="title">价格</div>
                <div class="input-box text-center">
                    <input type="number" v-model="tempMin" placeholder="最低价" class="input grey-bg">
                    <span class="s-line grey-color">&nbsp;——&nbsp;</span>
                    <input type="number" v-model="tempMax" placeholder="最高价" class="input grey-bg">
                </div>
                <div class="btn-box">
                    <div @click="onClickSelectReset" class="btn btn-mobile btn-block btn-white-red red-border">重置</div>
                    <div @click="onClickSelectConfirm" class="btn btn-mobile btn-block btn-red">确定</div>
                </div>
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 用户点选类型
            selectType:'',
            /** 过滤类型 */
            filterType: '',
            /** 最低价 */
            tempMin: '',
            /** 最高价 */
            tempMax: '',
            /** 排序 */
            sortName: '',
            sortValue: '',
            /** 排序选项 */
            sortOptions: [
                {
                    val: 'multiple',
                    name: '综合排序',
                },
                {
                    val: 'createdAt',
                    name: '新上架',
                },
                {
                    val: 'priceDesc',
                    name: '价格由高到低',
                },
                {
                    val: 'priceAsc',
                    name: '价格由低到高',
                },
                {
                    val: 'visitor',
                    name: '高人气',
                },
            ],
        };
    },
    computed: {
        /** 区间是否有效 */
        isRangeValid() {
            if (this.tempMin && this.tempMax) {
                const low = Number(this.tempMin);
                const high = Number(this.tempMax);
                return !isNaN(low) && !isNaN(high) && (high > low);
            }
            return true;
        },
        /** 区间设置是否正在生效 */
        isRangeEnable() {
            return (this.tempMin && !isNaN(Number(this.tempMin))) || (this.tempMax && !isNaN(Number(this.tempMax)));
        },
    },
    methods: {
        /** 选择过滤类型 */
        onClickFilterType(type) {
            if (this.filterType === type) {
                this.filterType = '';
                return;
            }
            this.filterType = type;

            if(this.selectType === type){
                this.selectType = '';
                return;
            }
            this.selectType = type
        },
        /**
         * 点击排序
         */
        onClickSort(type,_name,_val) {
            const item = {
                val: _val,
                name: _name,
            }
            this.$emit('sort', item);
            this.sortName = _name;
            this.sortValue = _val;
            // this.filterType = '';

            // if(this.selectType === type){
            //     this.selectType = '';
            //     return;
            // }
            this.selectType = type
        },
        /**
         * 点击重置
         */
        onClickSelectReset() {
            this.tempMin = '';
            this.tempMax = '';
            this.$emit('range', {
                min: this.tempMin,
                max: this.tempMax,
            });
        },
        /**
         * 确认
         */
        onClickSelectConfirm() {
            if (!this.isRangeValid) {
                wx.showToast({
                    title: '请输入正确的价格区间',
                    icon: 'none',
                });
                return;
            }
            this.$emit('range', {
                min: Number(this.tempMin) > 0 ? this.tempMin * 100 : '',
                max: Number(this.tempMax) ? this.tempMax * 100 : '',
            });
            this.filterType = '';
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.selectTabs_box {
    width: 92%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0px auto;
    .sortItem{
        // width: 20%;
        display: flex;
        font-size: 12px;
        transition: transform .3s;
    
        .sortItem_img{
            width: 12px;
            height:12px;
            margin: 4px 0px 0px 4px;
        }
        .up_img{
            width: 8px;
            height:12px;
            margin: 4px 0px 0px 4px;
        }
    }
    // .selectText{
    //     color: ;
    // }
    .invert {
        transform-origin: center;
        transform: rotateZ(-180deg);
    }
}
</style>